<script setup lang="ts">
import type { PlusColumn } from 'plus-pro-components'
import type { VxeGridProps } from 'vxe-table'

import { useReformInstallationApplyDetail } from '@fl/api/elevator-api'
import { SearchForm, SearchTable } from '@fl/components'
import { treeFindLabel } from '@fl/utils/tree'
import { cloneDeep } from 'lodash-es'
import { useRoute } from 'vue-router'

import { AUTH_RESULT_OPTIONS } from './constant'
const router = useRouter();

defineOptions({
    name: 'RetrofitElevatorRequirementDetail',
})
type IState = {
    applicantMobile: string
    ownerName: string
}
const route = useRoute()
const id = route.params.id
const initialState = {
    applicantMobile: '',
    ownerName: '',
}
const state = ref<IState>(cloneDeep(initialState))

const params = computed(() => ({
    ...state.value,
    orderBy: 'create_time', // 根据创建时间排序
    orderType: 'desc', // 降序
    unitId: id,
}))
const { data, isLoading } = useReformInstallationApplyDetail(params)
const records = ref<any>()

watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value)
    }
})
const columns: PlusColumn[] = [
    {
        label: '上报人账号',
        prop: 'applicantMobile',
    },
    {
        label: '业主信息',
        prop: 'ownerName',
    },
]
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'applicantMobile', title: '上报人账号' },
        { field: 'ownerName', title: '业主姓名' },
        { field: 'ownerIdCard', title: '业主身份证号' },
        { field: 'houseAddr', title: '详细地址' },
        { field: 'estateNo', slots: { default: 'estateNo' }, title: '不动产登记证号/房屋权属证明' },
        { field: 'estateFile', slots: { default: 'estateFile' }, title: '其他证明材料' },
        {
            field: 'reportIdentity',
            slots: { default: 'reportIdentity' },
            title: '上报人身份',
        },
        { field: 'reportMobile', title: '联系方式' },
        { field: 'auth', slots: { default: 'auth' }, title: '身份初步比对结果' },
        { field: 'status', slots: { default: 'status' }, title: '身份核实状态' },
        { field: 'createTime', title: '提交时间' },
    ],
})
function reset() {
    state.value = initialState
}
function submit(values: any) {
    state.value = cloneDeep(values)
}

const imgList = ref<string[]>([])
const imgViewerVisible = ref(false)

function preview(urls: string) {
    if (!urls) {
        return
    }
    imgViewerVisible.value = true
    imgList.value = urls.split(',')
}

function closeImgViewer() {
    imgViewerVisible.value = false
    imgList.value = []
}
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm submit-text="搜索"
                    v-bind="state"
                    :columns="columns"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     :loading="isLoading"
                     :data="records"
        >
        <template #toolbar_buttons>
        <ElButton
          type="primary"
          @click="router.go(-1)"
          >返回列表</ElButton
        >
      </template>
            <template #estateNo="{ row }">
                <span v-if="row.estateNo">{{ row.estateNo }}</span>

                <el-button v-else
                           text
                           :type="row.houseUrls ? 'primary' : 'default'"
                           @click="preview(row.houseUrls)"
                >
                    {{ row.houseUrls ? '点击查看' : '/' }}
                </el-button>
            </template>

            <template #estateFile="{ row }">
                <el-button text
                           :type="row.estateFile ? 'primary' : 'default'"
                           @click="preview(row.estateFile)"
                >
                    {{ row.estateFile ? '点击查看' : '/' }}
                </el-button>
            </template>

            <template #reportIdentity="{ row }">
                {{ row.reportIdentity == 1 ? "业主" : `非业主-${row.reportRelation}` }}
            </template>

            <template #auth="{ row }">
                <span>{{ treeFindLabel({ targetValue: row.auth, treeData: AUTH_RESULT_OPTIONS }) }}</span>
                <!-- {{ row.auth === 1 ? "通过" : "不通过" }} -->
            </template>

            <template #status="{ row }">
                {{
                    row.auth === 1 ? "/" :
                    row.status === 1
                        ? "待专班核实"
                        : row.status === 2
                            ? "专班核实通过"
                            : "专班核实不通过"
                }}
            </template>
        </SearchTable>

        <el-image-viewer v-if="imgViewerVisible"
                         :zoom-rate="1.2"
                         :url-list="imgList"
                         @close="closeImgViewer"
        />
    </ElCard>
</template>
